<template>
  <div class="dia-box">
    <el-dialog v-model="dialogVisible" title="详情" width="1110px">
      <div class="dialog-content">
        <div class="table-list">
          <div class="title">
            <div class="item" :style="title.style" v-for="(title, titIndex) in cloumn"
              :key="titIndex">
              {{ title.label }}
            </div>
          </div>
          <div class="goods-item" v-for="(item, index) in classData" :key="index">
            <div class="item" v-for="(item2, index2) in cloumn" :key="index2"
              :style="item2.style">
              <div v-if="item2.type == 'text'">
                {{ item[item2.prop] }}
              </div>
              <div v-else>
                <div class="attend p-flex p-ai-c p-jc-sa">
                  <div><span class="poin"></span>出勤{{ item['work'] }}次</div>
                  <div><span class="poin poin1"></span>缺勤{{ item['absence'] }}次</div>
                  <div><span class="poin poin2"></span>未考勤{{ item['noAttendance'] }}次</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="tag-list p-flex p-fw-w">
          <div class="tag p-flex p-ai-c" v-for="(item, index) in tagList" :key="index">
            <span class="poin" :class="item.state === 1 ? 'poin1' : item.state === 2 ? 'poin2' : ''"></span>
            <span>{{ item.startTime }}</span>
            <span>{{ item.state === 0 ? '出勤' : item.state === 1 ? '缺勤' : '未考勤' }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
          <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineExpose, getCurrentInstance } from "vue";
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)

const classData = ref([
  {
    className: "化妆全科",
    teacherName: "张三",
    classTimes: "44",
    openingTime: "2023-03-02",
    classEnding: "2023-03-09",
    attendceDetail: ""
  }
])

const tagList = ref([])

const openDialog = (row) => {
  classData.value = [row]
  getFindDetail(row.studentId, row.classId)
  dialogVisible.value = true
}

const getFindDetail = (studentId, classId) => {
  proxy.$API.student.attendanceDetail.get({
    studentId: studentId,
    classId: classId
  }).then(res => {
    console.log(res);
    if(res.code !== 200) {
      ElMessage({
        type: "error",
        message: res.msg
      })
    }else{
      tagList.value = res.data
    }
  })
}

const cloumn =  ref([
  {
    prop: "className",
    label: "班级名称",
    style: "flex: 3;",
    type: 'text'
  },
  {
    prop: "teacherName",
    label: "授课老师",
    style: "flex: 1;",
    type: 'text'
  },
  {
    prop: "classTimes",
    label: "课次",
    style: "flex: 1;",
    type: 'text'
  },
  {
    prop: "openingTime",
    label: "开始时间",
    style: "flex: 1;",
    type: 'text'
  },
  {
    prop: "classEnding",
    label: "结束时间",
    style: "flex: 1;",
    type: 'text'
  },
  {
    prop: "attendceDetail",
    label: "考勤情况",
    style: "flex: 3;",
    type: 'status'
  },
])

defineExpose({openDialog})
</script>

<style lang="scss" scoped>
.dia-box {
  ::v-deep .el-dialog__body {
    border-top: 1px solid #cfcfcf;
    padding: 10px 20px;
    height: 600px;
    overflow-y: auto;
  }
  ::v-deep .el-dialog__footer {
    background: #f0f4f7;
    text-align: center;
    padding-top: 15px;
  }
  .dialog-content {
    .table-list {
      margin-top: 10px;
      border-top: 1px solid #cecece;
      border-left: 1px solid #cecece;
      .title, .goods-item {
        display: flex;
        background-color: #e7e7e7;
        color: #192942;
        font-size: 14px;
        .item {
          text-align: center;
          border-right: 1px solid #cecece;
          border-bottom: 1px solid #cecece;
          height: 40px;
          line-height: 40px;
          .btn {
            span {
              cursor: pointer;
            }
          }
          .inp {
            padding: 0 5px;
            ::v-deep .el-input__inner {
              height: 22px;
              line-height: 22px;
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
      .goods-item {
        background-color: #fff;
      }
    }

    .attend {
      &>div {
        display: flex;
        align-items: center;
      }
    }
    .poin {
      width: 14px;
      height: 14px;
      background-color: #1ada82;
      border-radius: 50%;
      margin-right: 8px;
      display: inline-block;
    }
    .poin1 {
      background-color: #ff4a3f;
    }
    .poin2 {
      background-color: #ffcb3f;
    }

    .tag-list {
      padding-top: 20px;
      .tag {
        border: 1px solid #d7d7d7;
        padding: 10px 0;
        margin-right: 20px;
        margin-bottom: 30px;
        &>span {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>